<template>
  <div class='deviceSafeRisk'></div>
</template>

<script>
import { getPatientWeightStats} from "@/api/patient";

export default {
  name: 'deviceSafeRisk',
  data() {
    return {
      myChart: null,
      chartData: [],
      nameList: [],
      valueList: [],
    }
  },
  methods: {

    getData() {
      getPatientWeightStats().then(res => {
        this.chartData = res.data
        this.chartData.forEach(e=> {
          this.nameList.push(e.name)
          this.valueList.push(e.value)
        })

        this.setDeviceSafe()
      })
    },
    // 设备安全性风险
    setDeviceSafe() {
      let option = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            {name: '体重', icon: 'circle'},
          ],
          gridIndex: 3,
          orient: 'vertical',
          right: "44%",
          bottom: "6%",
          itemWidth: 7,
          itemHeight: 7,
          textStyle: {
            color: '#00CCFF',
            fontSize: 10
          }
        },

        angleAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#172E6E'
            }
          },
          startAngle: 135,
          axisLabel: {
            color: '#04E8EB',
            fontSize: 10
          },
          axisTick: {show: false},
          data: this.nameList,
          z: 10
        },
        radiusAxis: {
          splitLine: {
            lineStyle: {
              color: '#172E6E'
            }
          },
          axisTick: {show: false},
          axisLabel: {show: false},
          axisLine: {
            show: false
          }
        },
        polar: {
          center: ['50%', '55%'],
          radius: "65%",
        },
        series: [
          {
            type: 'bar',
            data: this.valueList,
            coordinateSystem: 'polar',
            name: '体重',
            itemStyle: {
              color: { // 颜色线性渐变
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(144, 247, 236,1)' // 0% 处的颜色
                }, {
                  offset: 1, color: '#32ccbc' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            stack: 'a'
          }
        ]
      };
      if (!this.myChart) this.myChart = this.$echarts(this.$el);

      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(option);
    }
    ,
  },
  mounted() {
    this.getData()
  },
}
</script>

<style lang="less" scoped>
.deviceSafeRisk {
  height: 100%;
}
</style>
